<script setup lang="ts">
import { ref, watchEffect } from 'vue'

// 示例1：基础用法
const count = ref(0)
const message = ref('Hello')

watchEffect(() => {
  // 自动追踪 count 和 message 的变化
  console.log(`Count: ${count.value}, Message: ${message.value}`)
  // 会在首次运行时打印，并在 count 或 message 变化时重新打印
})

// 示例2：异步请求
const userId = ref('1')
const userData = ref(null)
const loading = ref(false)

// 模拟 API
const fetchUser = async (id: string) => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({ id, name: `User ${id}` })
    }, 1000)
  })
}

// 当 userId 变化时自动重新请求
watchEffect(async () => {
  loading.value = true
  try {
    // watchEffect 会追踪到这里使用了 userId.value
    userData.value = await fetchUser(userId.value)
  } finally {
    loading.value = false
  }
})

// 示例3：清理副作用
const enabled = ref(false)
watchEffect((onCleanup) => {
  if (!enabled.value) return
  
  const timer = setInterval(() => {
    count.value++
  }, 1000)
  
  // 在下一次执行前或停止时调用清理函数
  onCleanup(() => clearInterval(timer))
})
</script>

<template>
  <div class="watcheffect-demo">
    <h2>WatchEffect 示例</h2>

    <section>
      <h3>1. 基础追踪</h3>
      <div>
        <button @click="count++">Count: {{ count }}</button>
        <input v-model="message" placeholder="修改消息">
        <p>查看控制台输出</p>
      </div>
    </section>

    <section>
      <h3>2. 自动请求</h3>
      <div>
        <input v-model="userId" placeholder="输入用户ID">
        <p v-if="loading">加载中...</p>
        <p v-else>用户数据: {{ userData }}</p>
      </div>
    </section>

    <section>
      <h3>3. 自动清理</h3>
      <div>
        <label>
          <input type="checkbox" v-model="enabled">
          启用自动计数
        </label>
        <p>Count: {{ count }}</p>
        <p class="tip">
          启用时每秒自动增加计数，禁用时自动清理定时器
        </p>
      </div>
    </section>
  </div>
</template>

<style scoped>
.watcheffect-demo {
  padding: 20px;
}

section {
  margin: 20px 0;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.tip {
  color: #666;
  font-size: 0.9em;
  font-style: italic;
}
</style> 